<template>
<div class="container">
  <headers title="账单" :refresh="isRefresh" :path="path"></headers>
  <div class="content">
    <div class="list-block media-list no-margin" v-for="billInfo in billInfos">
      <ul>
        <li>
          <a href="#" class="item-link item-content">
            <div class="item-inner">
              <div class="item-title-row">
                <div class="item-title color-black">接收第三方直投任务，并完成</div>
              </div>
              <div class="item-title-row">
                <div class="item-title color-light task-quantity">
                  <span><i class="bg-color-18bdfa">总</i> {{billInfo.count}}</span>
                  <span><i class="bg-color-4eddb6">单</i> {{billInfo.unitPrice}}</span>
                  <span><i class="bg-color-ed6353">反</i> {{billInfo.returnCount}}</span>
                </div>
                <div class="item-after color-danger">+{{billInfo.returnTotalPrice}}</div>
              </div>
              <div class="item-title-row">
                <div class="item-title color-light">时间：{{billInfo.createDateView | formatDate}}</div>
              </div>
            </div>
          </a>
        </li>
      </ul>
    </div>
    <!-- 加载提示符 -->
    <div class="infinite-scroll-preloader" v-show="!isSearch">
      <div class="preloader" v-show="isLoading"></div>
      <div class="preloader-btn" v-if="!isLoading && !isLoaded" @click="doPreload">点击加载更多</div>
      <div class="preloaded" v-if="isLoaded">没有更多内容了</div>
    </div>
  </div>
  <nav class="bar bar-tab">
    <a class="tab-item" v-link="{path: '/home', replace: true}">
      <span class="icon icon2 home-icon"></span>
      <span class="tab-label">首页</span>
    </a>
    <a class="tab-item" v-link="{path: '/tuijianma', replace: true}">
      <span class="icon icon2 tuijianma-icon"></span>
      <span class="tab-label">推荐码</span>
    </a>
    <a class="tab-item" v-link="{path: '/ucenter', replace: true}">
      <span class="icon icon2 ucenter-icon"></span>
      <span class="tab-label">个人中心</span>
    </a>
  </nav>
</div>
</template>

<script>
import $ from 'zepto'
import Headers from '../components/Headers'
import store from '../assets/js/store.min.js'

export default {
  ready () {
    $.init()
    this.getBillInfo(this.currPage, () => {
      setTimeout(() => {
        if (this.currPage === this.totalPage) {
          this.isLoaded = true
        }
        this.isLoading = false
      }, 1000)
    })
    this.getPath()
  },
  data () {
    return {
      billInfos: [],
      path: '',
      isRefresh: false,
      taskType: this.$route.params.type,
      customerId: store('customerId') || 0,
      isLoading: true,
      isLoaded: false,
      totalPage: 1,
      currPage: 1
    }
  },
  methods: {
    getBillInfo (page, callback) {
      if (this.taskType === '1') {
        this.$http.jsonp('http://www.mayishengcai.com/VoteManager/rest/findReturnVotes', {
          params: {
            customerId: this.customerId,
            page: page
          }
        }).then((data) => {
          let total = data.data.total ? Math.ceil(data.data.total / 5) : 1
          this.$set('totalPage', total)
          this.billInfos = this.billInfos.concat(data.data.rows)
          if (callback) {
            callback()
          }
        })
      }
      else if (this.taskType === '2') {
        this.$http.jsonp('http://www.mayishengcai.com/VoteManager/rest/findReturnMicroblogs?customerId' + this.customerId)
        .then((data) => {
          let total = data.data.total ? Math.ceil(data.data.total / 5) : 1
          this.$set('totalPage', total)
          this.billInfos = this.billInfos.concat(data.data.rows)
          if (callback) {
            callback()
          }
        })
      }
    },
    getPath () {
      if (this.taskType === '1') {
        return this.$set('path', '/publish_task')
      }
      return this.$set('path', '/toupiao')
    },
    doPreload () {
      if (this.isLoading) {
        return false
      }
      if (this.currPage === this.totalPage) {
        return false
      }
      this.isLoading = true
      this.currPage++
      this.getBillInfo(this.currPage, () => {
        setTimeout(() => {
          if (this.currPage === this.totalPage) {
            this.isLoaded = true
          }
          this.isLoading = false
        }, 1000)
      })
      return false
    }
  },
  filters: {
    formatDate (date) {
      return date.substr(0, 10)
    }
  },
  components: {
    Headers
  }
}
</script>

<style scoped>
.task-quantity{
  width:100%;
}
.task-quantity span{
  display:inline-block;
  width:20%;
}
.task-quantity span i{
  font-style:normal;
  color:#FFF;
}
.bg-color-18bdfa{
  background-color:#18bdfa;
}
.bg-color-4eddb6{
  background-color:#4eddb6;
}
.bg-color-ed6353{
  background-color:#ed6353;
}
.infinite-scroll-preloader{
  margin:10px 10px 65px 10px;
  text-align:center;
}
.infinite-scroll-preloader .preloader{
  width:20px;
  height:20px;
}
.infinite-scroll-preloader .preloader-btn{
  width:200px;
  height:25px;
  line-height: 25px;
  margin:0 auto;
  text-align:center;
  border:1px #d6d6d6 solid;
  border-radius:4px;
  font-size:14px;
}
.infinite-scroll-preloader .preloaded{
  width:200px;
  height:25px;
  line-height: 25px;
  margin:0 auto;
  text-align:center;
  color:#aaa;
  font-size:14px;
}
</style>